<template>
  <div class="information">
    <!-- 导航栏 -->
    <div class="xm-product-box">
      <div class="nav-bar">
        <div class="container">
          <h2>小米10</h2>
          <div class="con">
            <div class="left">
              <span class="separator">|</span>
              <a href="">小米10 Pro</a>
            </div>
            <div class="right">
              <a href="">概述</a>
              <span class="separator">|</span>
              <a href="">参数</a>
              <span class="separator">|</span>
              <a href="">相机研发揭秘</a>
              <span class="separator">|</span>
              <a href="">F码通道</a>
              <span class="separator">|</span>
              <a href="">咨询客服</a>
              <span class="separator">|</span>
              <a href="">用户评价</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="page">
      
      <div class="product-box container">

          <!-- 轮播图 -->

        <div class="block">
          <el-carousel trigger="click" height="560px">
            <el-carousel-item v-for="item in informationlunbolist" :key="item.id">
              <img :src="item.img1">
            </el-carousel-item>
          </el-carousel>
        </div>


        <!-- 商品信息 -->

        <div class="product-con">
          <h2>{{getname}}</h2>
          <p>
            <span class="con-p-spa1">「购机赠小米定制T恤；最高享24期免息，低至221元起/期；加149元得199元55W立式风冷无线充」</span>
            <span class="con-p-spa2">120X 超远变焦 / 120W 秒充科技 / 120Hz刷新率 + 240Hz采样率 / 骁龙865旗舰处理器 / 双模5G / 10倍混合光学变焦 / OIS光学防抖+EIS数字防抖 / 2000万超清前置相机 / 双串蝶式石墨烯基锂离子电池 / 等效4500mAh大电量 / 120W 有线秒充+50W无线秒充+10W无线反充 / WiFi 6 / 多功能NFC / 红外遥控</span>
          </p>
          <p title="企业名称：小米通讯技术有限公司
    企业执照注册号：91110108558521630L
    企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
    企业电话：400-100-5678
    营业期限：2010年08月25日 至 2040年08月24日
          经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）" class="company-info">小米自营</p>
          <div class="price-info">
            <span>
              5599 元
            </span>
          </div>
          <div class="line"></div>
          <div class="address-box">
            <div class="product-address">
              <i class="iconfont icon-dibiao"></i>
              <div class="address-con">
                <div class="address-info">
                  <span>北京</span>
                  <span>北京市</span>
                  <span>海淀区</span>
                  <span>清河街道</span>
                  <a href="">修改</a>
                </div>
                <div class="info">
                  <div class="desc">
                    <span>有现货</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 购买选择 -->

          <div class="buy-option">

            <!-- 选择颜色 -->

            <div class="buy-box-child">
              <div class="option-box">
                <div class="title">选择颜色</div>
                  <div class="clearfix">
                    <el-radio 
                    v-model="radio1" 
                    :label="index+1" 
                    border 
                    v-for="(color,index) in getcolor" 
                    :key="color.id"
                    @change="getIndex(index)"
                    >
                    {{color.color}}
                    </el-radio>
                    <!-- <el-radio v-model="radio1" label="2" border>透明版</el-radio>
                    <el-radio v-model="radio1" label="3" border>亮银版</el-radio> -->
                  </div>
              </div>
            </div>

            <!-- 选择内存 -->

            <div class="buy-box-child">
              <div class="option-box">
                <div class="title">选择版本</div>
                <div class="clearfix">
                    <el-radio 
                    v-model="radio2" 
                    :label="index2+1" 
                    border 
                    text-color="#ff6700" 
                    v-for="(size,index2) in getsize" 
                    :key="size.id"
                    @change="getPrice(index2)"
                    >
                    {{size.size1}}
                    </el-radio>
                    <!-- <el-radio v-model="radio2" label="2" border>8GB+128GB</el-radio>
                    <el-radio v-model="radio2" label="3" border>12GB+256GB</el-radio>
                    <el-radio v-model="radio2" label="4" border>16GB+512GB</el-radio> -->
                </div>
              </div>
            </div>

          </div>
          
          <!-- 意外保护 -->
          <div class="service-box">
            <div class="service-item-box">
              <div class="title">
                选择小米提供的意外保护
                <a href="">了解意外保护 ></a>
              </div>
              <div class="service-item-box1">
                    <el-radio 
                    v-model="radio3" 
                    :label="index3+1" 
                    border 
                    text-color="#ff6700"  
                    v-for="(accident,index3) in getaccident" 
                    :key="accident.id"
                    @change="getPrice3(index3)"
                    >
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1596695587.15667138.png" alt="">
                      <div class="box">
                    <h3>
                      {{accident.h2}}
                      <em>{{accident.price}}</em>
                    </h3>
                    <div class="desc">{{accident.title}}</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">{{accident.price}}</div>
                  </div>
                    </el-radio>
              </div>
            </div>
            
            <div class="service-item-box">
              <div class="title">
                选择小米提供的延长保修
                <a href="">了解意外保护 ></a>
              </div>
              <div class="service-item-box1">
                    <el-radio v-model="radio4" :label="index4+1" border text-color="#ff6700" v-for="(extend,index4) in getextend" :key="extend.id">
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1596695587.15667138.png" alt="">
                      <div class="box">
                    <h3>
                      {{extend.h1}}
                      <em>{{extend.price}}</em>
                    </h3>
                    <div class="desc">{{extend.h2}}</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">{{extend.price}}</div>
                  </div>
                    </el-radio>
              </div>
            </div>

            <div class="service-item-box">
              <div class="title">
                选择小米提供的云空间服务
                <a href="">了解云空间服务 > ></a>
              </div>
              <div class="service-item-box1">
                    <el-radio v-model="radio5" :label="index5+1" border text-color="#ff6700" v-for="(cloud,index5) in getcloud" :key="cloud.id">
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1600176481.06844959.png" alt="">
                      <div class="box">
                    <h3>
                      {{cloud.h1}}
                      <em>{{cloud.price}}</em>
                    </h3>
                    <div class="desc">{{cloud.h2}}</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">{{cloud.price}}</div>
                  </div>
                    </el-radio>
                    <!-- <el-radio v-model="radio5" label="2" border text-color="#ff6700">
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1596695587.15667138.png" alt="">
                      <div class="box">
                    <h3>
                      云空间年卡 50G
                      <em>49元</em>
                    </h3>
                    <div class="desc">主商品签收后，自动激活至下单帐号</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">49元</div>
                  </div>
                    </el-radio>
                    <el-radio v-model="radio5" label="3" border text-color="#ff6700">
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1596695587.15667138.png" alt="">
                      <div class="box">
                    <h3>
                      云空间月卡200G
                      <em>19元</em>
                    </h3>
                    <div class="desc">主商品签收后，自动激活至下单帐号</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">19元</div>
                  </div>
                    </el-radio>
                    <el-radio v-model="radio5" label="4" border text-color="#ff6700">
                      <img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1596695587.15667138.png" alt="">
                      <div class="box">
                    <h3>
                      云空间月卡 50G
                      <em>6元</em>
                    </h3>
                    <div class="desc">主商品签收后，自动激活至下单帐号</div>
                    <div class="agreement-box">
                      <i class="iconfont icon-checkbox">
                        <em></em>
                      </i>
                      我已阅读
                      <a href="">
                        服务条款
                        <span>| </span>
                      </a>
                      <a href="">
                        常见问题
                      </a>
                    </div>
                    <div class="price">6元</div>
                  </div>
                    </el-radio> -->
              </div>
            </div>
          </div>

          <div class="selected-list">
            <ul>
              <li>
                {{getname}} <span v-cloak>{{type}}</span> <span v-cloak>{{tinct}}</span>
                <span v-cloak class="selected-list-price">{{poult}}</span>
              </li>
            </ul>
            <div class="total-price">
              总计：{{poult}}
            </div>
          </div>

          <div class="btn-box">
            <el-button type="danger" @click="goods(),toCart('/cart/')">加入购物车</el-button>
            <el-button type="info">
              <i class="iconfont icon-xihuan"></i>
              喜欢
              </el-button>
          </div>

          <div class="after-sale-info">
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>小米自营</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>小米发货</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>7天无理由退货</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>运费说明</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>企业信息</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>售后服务政策</em>
              </a>
            </span>
            <span>
              <a href="" class="support">
                <i class="iconfont icon-icon-test"></i>
                <em>7天价格保护</em>
              </a>
            </span>
          </div>
        </div>

      </div>

    </div>

  </div>

  
</template>

<script>
import axios from 'axios'
export default {
  data: () => ({
    id: '',
    informationlunbolist: [],
    // total1: {},
    getname:"",
    poult: "",
    type: "",
    tinct: "",
    url: "",
    "title":"",
    "accidentPrice":"",
    index: 0,
    total1: [],
    getcolor: [],
    getsize: [],
    getaccident: [],
    getextend: [],
    getcloud: [],
    // zl1: [],
    checked: true,
    radio1: '5',
    radio2: '5',
    radio3: '5',
    radio4: '5',
    radio5: '5',
  }),
  // async created() {
  //   this.getInformationLunbo()
  //   // this.zl()
  //   this.goods()
  //   await this.total()
  //   console.log(this.total1.id)
  // },
  created() {
    this.id=this.$route.params.id
    this.getInformationLunbo()
    this.total()
    this.getColor()
    this.getSize()
    this.getAccident()
    this.getExtend()
    this.getCloud()
    this.getName()
  },
  // watch: {
  //   index(newVal, oldVal) {
  //       this.$nextTick(()=>{
  //         this.getsize=newVal
  //         console.log(this.index)
  //       })
  //   }
  // },
  methods: {
    toCart(url){
      this.$router.push(url)
    },
    getIndex(el) {
      
      this.index = el
      this.getSize()
      this.tinct = this.getcolor[this.index].color
      this.url = this.getcolor[this.index].img[1].img1
      console.log(this.getcolor[this.index].img[1].img1)
      // console.log(this.getcolor[this.index].color)
      // console.log(this.index)
      this.getInformationLunbo()
    },
    getPrice (index2) {
      // console.log(index2)
      this.poult = this.getsize[index2].price
      this.type = this.getsize[index2].size1
      this.title= this.getname + this.getsize[index2].size1 + this.tinct
      // console.log(this.title)
      console.log(this.getsize[index2].price)
    },
    getPrice3(index3) {
      this.accidentPrice = this.getaccident[index3].price
      console.log(this.getaccident[index3].price)
    },
    async getName (){
      try {
        let id = this.id
        const {data} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getname = data.name
        // console.log(data.name)
      } catch (error) {
        console.log(error.data)
      }

    },
    async getInformationLunbo() {
      let id = this.id
      // console.log(id)
      try {
        const {data : {xiaomi1}} =await axios.get('http://10.41.152.13:3000/total/'+ id)
        this.informationlunbolist = xiaomi1[this.index].img
        // console.log(this.index)
      } catch (error) {
        console.log("error")
      }
    },
    async getColor() {
      try {
        let id = this.id
        const {data : {xiaomi1}} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getcolor =xiaomi1
        // console.log(xiaomi1)
      } catch (error) {
        console.log(error.data)
      }
    },
    async getSize() {
      try {
        let id = this.id
        const {data : {xiaomi1}} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getsize = xiaomi1[this.index].size
        // console.log(xiaomi1[this.index].size)
        // console.log(data[0].size)
      } catch (error) {
        console.log(error.data)
      }
    },
    async total() {
      try {
        const {data} =await axios.get('http://10.41.152.13:3000/total')
        this.total1 = data
        // console.log(data)
      } catch (error) {
        console.log(error.data)
      }
    },
    async getAccident() {
      try {
        let id = this.id
        const {data :{accident}} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getaccident = accident
        // console.log(accident)
      } catch (error) {
        console.log(error.data)
      }
    },
    async getExtend() {
      try {
        let id = this.id
        const {data : {extend}} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getextend = extend
        // console.log(extend)
      } catch (error) {
        console.log(error.data)
      }
    },
    async getCloud() {
      try {
        let id = this.id
        const {data:{cloud}} =await axios.get('http://10.41.152.13:3000/total/' + id)
        this.getcloud = cloud
        console.log(cloud)
      } catch (error) {
        console.log(error.data)
      }
    },
    async goods() {
      try {
        await axios.post('http://10.41.152.13:3000/cartGoods',
        {
          "price":this.poult,
          "title":this.title,
          "count":1,
          "xiaoji":this.poult,
          "select":true,
          "url":this.url
        }).then(res => {
          console.log(res)
        })
        // console.log(res2)
        // console.log(this.informationlunbolist)
      } catch (error) {
        
      }
    }
  },
  computed:{
    
  }
}
</script>

<style lang="less" scoped>
.information {
  height: 3000px;
  // 头部
  .xm-product-box {
    position: relative;
    z-index: 4;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    .nav-bar{
        height: 63px;
        width: 100%;
        margin-top: 0;
        color: #616161;
        position: relative;
        .container {
          // position: fixed;
          // top: 0;
          // left: 10%;
          width: 1226px;
          margin-right: auto;
          margin-left: auto;
          // background: red
          h2 {
            margin: 0;
            font-size: 18px;
            font-weight: 400;
            line-height: 60px;
            color: #424242;
            float: left;
          }
          .con {
            a {
              color: #616161;
              text-decoration: none;
            }
              a:hover {
                color: rgb(255, 74, 0);;
              }
            .left {
              float: left;
              margin-left: 5px;
              font-size: 12px;
              margin-top: 21px;
            }
            .right {
              float: right;
              margin: 17px 0 0 0;
              span {
                margin: 0 .5em;
              }
            }
          }
        }
      }
  }
  .page {
    .product-box {
      // background: red;
      display: flex;
      justify-content: space-around;
      width: 1226px;
      margin-right: auto;
      margin-left: auto;
      //轮播图
      .block {
        width: 560px;
        height: 560px;
          img {
            width: 100%;
          }
          .el-carousel__button {
            display: block;
            opacity: .48;
            width: 50px;
            height: 3px;
            background-color: #a3a3a3;
            border: none;
            outline: 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
            transition: .3s;
          }
        .el-carousel {

          ul {
            li {
              .el-carousel__button {
                width: 50px;
                height: 3px;
                background-color: #a3a3a3;
              }
            }
          }
        }
        // .el-carousel__item {
        //   height: 560px;
        //   width: 560px;
        // }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
          background-color: #d3dce6;
        }

      }

      .product-con {
        width: 600px;
        a {
          text-decoration: none;
        }
        h2 {
          font-size: 24px;
          font-weight: 400;
          color: #212121;
        }

        p {
          .con-p-spa1{
            color: rgb(255, 74, 0);
          }
          .con-p-spa2 {
            color: #b0b0b0;
          }
        }

        .company-info {
          color: #ff6700;
        }

        .price-info {
          display: block;
          font-size: 18px;
          line-height: 1;
          color: #ff6700;
          padding: 12px 0 10px;
        }

        .line {
          margin-top: 12px;
          border-bottom: 1px solid #e0e0e0;
        }
        // 选择地址
        .address-box {
          margin: 20px 0;
          .product-address{
            padding: 30px 50px;
            position: relative;
            background: #fafafa;
            border: 1px solid #e0e0e0;
            .icon-dibiao {
              position: absolute;
              left: 20px;
              top: 26px;
              font-size: 24px;
              color: #999;
            }
            .address-con {
              
              .address-info{
                span {
                  display: inline;
                  margin-right: 14px;
                }
                a{
                  text-decoration: none;
                  color: #ff6700;
                }
              }
              .info{
                color: #b0b0b0;
                .desc{
                  span {
                    color: #ff6700;
                  }
                }
              }
            }
          }
        }
        // 选择颜色  版本
        .buy-option {
          .clearfix {
            margin-bottom: 30px;
            .el-radio.is-bordered.is-checked {
              border-color: #ff6700;
              .el-radio__input {
                .el-radio__inner.is-checked {
                  width: 0;
                  height: 0;
                }
              }
            }
          }
          .el-radio.is-bordered {
            width: 292px;
            height: 44px;
            margin-right: 10px;
            margin: 0;
            padding: 0;
            margin-right: 8px;
            line-height: 42px;
            // border-color: #ff6700;
            margin-top: 10px;
          }
          
          .el-radio__input {
            width: 0;
            height: 0;
          }
          

          // .buy-box-child {
          //   margin-bottom :30px;
          //   .option-box {
          //     .title {
          //       font-size: 18px;
          //     }
          //     .clearfix {
          //       margin: 0;
          //       padding: 0;
          //       width: 600px;
          //       height: 108px;
          //       li {
          //         a {
          //           text-decoration: none;
          //           color: #757575;
          //         }

          //         margin-right: 12px;
          //         margin-top: 10px;
          //         line-height: 42px;
          //         border: 1px solid #e0e0e0;
          //         list-style: none;
          //         transition: all .2s ease;
          //         float: left;
          //         font-size: 16px;
          //         width: 292px;
          //         text-align: center;
          //         cursor:pointer;
          //       }
          //       li:nth-child(2) {
          //         margin-right: 0px;
          //       }
          //       li:nth-child(4) {
          //         margin-right: 0px;
          //       }
          //       li:hover a{
          //           color: #ff6700;
          //       }
          //       li:hover {
          //         border-color:#ff6700;
          //       }
          //     }
          //   }
          // }
        }

        .service-box {
          .service-item-box {
            margin-bottom: 30px;
            .title {
              font-size: 18px;
              color: #333333;
              margin-bottom: 15px;
              line-height: 1;
              a {
                color: #ff6700;
                font-size: 14px;
                float: right;
                line-height: 18px;
              }
            }
            
            .service-item-box1 {
              position: relative;
              .el-radio.is-bordered.is-checked {
                  border-color: red;
                  color: red;
              }
              .el-radio.is-bordered {
                width: 600px;
                height: 147px;
                margin: 0;
                padding: 0;
                .el-radio__input {
                  position: relative;
                  display: inline-block;
                  margin-top: -46px;
                  margin-left: 30px;
                }
                img {
                  width: 50px;
                  height: 50px;
                  position: absolute;
                  left: 80px;
                  top: 40px;
                }
                .box {
                  display: inline-block;
                  width: 457px;
                  height: 85px;
                  margin-left: 130px;
                  margin-top: 30px;
                  h3 {
                    font-size: 18px;
                    margin: 0 0 10px 0;
                    em {
                      font-style: normal;
                      font-size: 14px;
                      background: #ff6700;
                      display: inline-block;
                      padding: 2px 6px;
                      border-radius: 20px;
                      color: #fff;
                      margin-left: 2px;
                    }
                  }
                  .desc {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    height: 18px;
                    color: #b0b0b0;
                    width: 286px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 5px;
                  }
                  .agreement-box {
                    margin-top: 5px;
                    a {
                      color: #ff6700;
                      margin: 0 2px;
                      display: inline-block;
                    }
                  }
                  .price {
                    position: absolute;
                    right: 20px;
                    bottom: 28px;
                    color: #757575;
                  }
                }
              }
            }
            ul {
              li {
                border: 1px solid #e0e0e0;
                margin-top: -1px;
                background: #fff;
                cursor: pointer;
                padding: 30px 0;
                position: relative;
                display: flex;
                
                .icon-yuandianxuanzekuang {
                  display: block;
                  border-radius: 50%;
                  width: 36px;
                  height: 36px;
                  line-height: 36px;
                  margin-left: 30px;
                  float: left;
                  font-size: 16px;
                  text-align: center;
                  cursor: pointer;
                  margin-top: 10px;
                }
                i {
                  display: block;
                }
                img {
                  width: 50px;
                  height: 50px;
                  margin-right: 15px;
                  margin-left: 10px;
                  float: left;
                }
                .box {
                  h3 {
                    font-size: 18px;
                    margin: 0 0 10px 0;
                    em {
                      font-style: normal;
                      font-size: 14px;
                      background: #ff6700;
                      display: inline-block;
                      padding: 2px 6px;
                      border-radius: 20px;
                      color: #fff;
                      margin-left: 2px;
                    }
                  }
                  .desc {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    height: 18px;
                    color: #b0b0b0;
                    width: 286px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 5px;
                  }
                  .agreement-box {
                    margin-top: 5px;
                    a {
                      color: #ff6700;
                      margin: 0 2px;
                      display: inline-block;
                    }
                  }
                  .price {
                    position: absolute;
                    right: 20px;
                    bottom: 28px;
                    color: #757575;
                  }
                }
              }
            }
          }
        }

        .selected-list {
          background: #f9f9fa;
          padding: 30px;
          margin-bottom: 30px;
          ul {
            li {
              list-style: none;
              line-height: 30px;
              color: #616161;
              .selected-list-price {
                float: right;
              }
            }
          }
          .total-price {
            color: #ff6700;
            font-size: 24px;
            padding-top: 20px;
          }
        }

        .btn-box {
          margin: 10px 0 20px 0;
          .el-button--danger {
            color: #fff;
            background-color: #ff6700;
            border-color: #ff6700;
            width: 298px;
            height: 52px;
            margin-right: 10px;
            font-size: 16px;
          }
          .el-button--info:hover {
            background: #ff1700;
          }
          .el-button--info {
            color: #fff;
            background-color: #b0b0b0;
            border-color: #b0b0b0;
            width: 140px;
            height: 52px;
            font-size: 16px;
            margin-left: 0;
            i {
                font-size: 22px;
                line-height: 23px;
                vertical-align: -4px;
                margin-right: 5px;
              }
          }
          .el-button--info:hover {
            background: #999;
          }
          .sale-btn {
            display: inline-block;
            margin-right: 10px;
            a {
              display: block;
              width: 298px;
              height: 52px;
              line-height: 52px;
              font-size: 16px;
              background: #ff6700;
              border-color: #ff6700;
              color: #fff;
              text-align: center;
            }
          }
          .favorite-btn {
            display: inline-block;
            vertical-align: top;
            a {
              display: block;
              width: 140px;
              height: 52px;
              line-height: 52px;
              padding: 0;
              margin: 0;
              border: 1px solid #b0b0b0;
              text-align: center;
              cursor: pointer;
              font-size: 16px;
              background: #b0b0b0;
              color: #fff;
              
            }
          }
        }

        .after-sale-info {
          span {
            display: inline-block;
            .support {
              display: inline-block;
              margin-right: 15px;
              line-height: 30px;
              margin-bottom: 10px;
              cursor: default;
              white-space: nowrap;
              color: #b0b0b0;
              i {
                font-size: 20px;
                display: inline-block;
                font-style: normal;
                vertical-align: middle;
              }
              em {
                font-style: normal;
                display: inline-block;
                margin-left: 2px;
                vertical-align: middle;
              }
            }
          }
        }

      }
    }
  }

  
}
</style>